/*
  学习目标：JSX-条件渲染 :  类似v-if, 直接销毁
  1. if else语句配合函数的返回值
  2. 三元
  3. 逻辑且
*/
import React from 'react';
import ReactDOM from 'react-dom';

const isLoading = true;

function renderTitle() {
  // 1. if else语句配合函数的返回值
  if (isLoading) return <h1>加载中...</h1>;
  return <h2>加载完毕</h2>;
}

const ulNode2 = (
  <div>
    {renderTitle()}
    {/* 2. 三元 */}
    <div>{isLoading ? <h1>加载中...</h1> : <h2>加载完毕</h2>}</div>

    {/* 3. 逻辑且 */}
    {isLoading && <h1>加载中...</h1>}
    {!isLoading && <h1>加载完毕</h1>}
  </div>
);

ReactDOM.render(ulNode2, document.getElementById('root'));
